<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>OFX Global</title>
    <meta name="keywords" content="OFX "/>
    <meta name="description" content="OFX"/>
    <link rel="stylesheet" href="css/country_style.css" type="text/css"/>

<?php include('scripts.php'); date_default_timezone_set('America/New_York'); ?>
    <!--this is drop down menu -->
    <script type="text/javascript" src="js/hoverIntent.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script>
        $(function() {
            $("#dragID").draggable({
               stop: function(event, ui) {
                    console.log($(this).css("top"));
                    console.log($(this).css("left"));
               }
            });

            $(".countrybox a, .login a").click(function(event){
                event.preventDefault();
                //$("#dgLogin").dialog("open").data("lang", $(this).attr("lang"));
                var lang = $(this).attr("lang");
                waiting();
                $.ajax({
                    type : 'POST',
                    url : "/home/doValidateLogin2",
                    dataType : 'json',
                    cache: false,
                    data: {
                        username : $('#username').val()
                        , userpassword : $('#userpassword').val()
                        , lang : lang
                    },
                    success : function(data) {
                        $.unblockUI();
                        if (data.error == false) {
                            $("#dgLogin").dialog("option", "height", 200);
                            $("#divError").hide(500);
                            window.location = "<?php echo url_for('/main/index') ?>";
                        } else {
                            $("#errorMsg").html(data.errorMsg);
                            $("#dgLogin").dialog("option", "height", 260);
                            $("#divError").show(500);
                        }
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                        error("Server connection error.");
                    }
                });
            });

            $("#dgLogin").dialog("destroy");
            $("#dgLogin").dialog({
                autoOpen : false,
                modal : true,
                resizable : false,
                closeOnEscape: false,
                hide: 'clip',
                show: 'fade',
                width: 400,
                height: 200,
                buttons: {
                    "<?php echo __('Login') ?>": function() {
                        var lang = $("#dgLogin").data("lang");
                        waiting();
                        $.ajax({
                            type : 'POST',
                            url : "/home/doValidateLogin",
                            dataType : 'json',
                            cache: false,
                            data: {
                                username : $('#username').val()
                                , userpassword : $('#userpassword').val()
                                , lang : lang
                            },
                            success : function(data) {
                                $.unblockUI();
                                if (data.error == false) {
                                    $("#dgLogin").dialog("option", "height", 200);
                                    $("#divError").hide(500);
                                    window.location = "<?php echo url_for('/main/index') ?>";
                                } else {
                                    $("#errorMsg").html(data.errorMsg);
                                    $("#dgLogin").dialog("option", "height", 260);
                                    $("#divError").show(500);
                                }
                            },
                            error : function(XMLHttpRequest, textStatus, errorThrown) {
                                error("Server connection error.");
                            }
                        });
                    }
                },
                open: function(event, ui) {
                    $("#divError").hide(500);
                    $("#dgLogin").dialog("option", "height", 200);
                },
                close: function() {

                }
            });
        });
        function waiting() {
            $("#waitingLB h3").html("<h3>Loading...</h3><div id='loader' class='loader'><img id='img-loader' src='/images/loading2.gif' alt='Loading' style='float: none;'/></div>");

            $.blockUI({
                        message: $("#waitingLB")
                        , css: {
                            border: 'none',
                            padding: '5px',
                            'background-color': '#fff',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            'border-radius': '10px',
                            opacity: .8,
                            color: '#000'
                        }});
            $(".blockOverlay").css("z-index", 1010);
            $(".blockPage").css("z-index", 1011);
        }
        function error(data) {
            var msgs = "";
            if ($.isArray(data)) {
                jQuery.each(data, function(key, value) {
                    msgs = value + "<br>";
                });
            } else {
                msgs = data + "<br>";
            }

            var errorPanel = "<div style='padding: 0 .7em;' class='ui-state-error ui-corner-all'>";
            errorPanel += "<p><span style='float: left; margin-right: .3em;' class='ui-icon ui-icon-alert'></span>";
            errorPanel += msgs + "</p></div>";
            $("#waitingLB h3").html(errorPanel);
            $.blockUI({
                        message: $("#waitingLB")
                        , css: {
                            border: 'none',
                            padding: '5px',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            'border-radius': '10px',
                            opacity: .9,
                            'min-width': '30%',
                            'width': '60%',
                            left: '25%',
                            top: '25%'
                        }});
            $(".blockOverlay").css("z-index", 1010);
            $(".blockPage").css("z-index", 1011);
            $('.blockOverlay').attr('title', 'Click to unblock').click($.unblockUI);
        }
    </script>

    <style type="text/css">
        .loginMap {
            background: url("../images/map-world.gif") no-repeat scroll left bottom transparent;
            height: 480px;
            position: relative;
            margin: 0 auto 50px;
            width: 1000px;
        }

        .wrapp_v2 {
            background: none repeat scroll 0 0 #FFFFFF;
            margin: 0 auto;
            padding: 0 10px;
            position: relative;
            width: 1000px;
        }

        #logoBox {
            height: 77px;
            position: relative;
            width: 980px;
            z-index: 20;
        }

        #globalnav {
            padding-top: 300px;
            position: relative;
            width: 700px;
        }

        #countryboxcontain {
            width: 400px;
        }

        .countrybox {
            background: none repeat scroll 0 0 white;
            float: left;
            margin-top: 40px;
            margin-left: 60px;
            margin-bottom: 10px;
        }

        #countryselect {
            font-family: 'Neo Sans W01 Light';
            float: left;
            font-size: 16px;
            margin: 10px 0 20px 20px;
        }

        #footer {
            background: none repeat scroll 0 0 #FFFFFF;
            clear: both;
            margin: 15px 0;
        }

        ul li {
            list-style: none outside none;
            padding-bottom: 20px;
        }

        a {
            color: #333333;
            font-weight: bold;
        }
       .loginFormWrap, .loginFormWrap input {
            display: block;
            float: left;
            font-size: 14px;
            margin-bottom: 0px;
            margin: 0;
            padding: 5px;
            width: 100%;
        }
        .ui-widget {
            font-family: Segoe UI, Arial, sans-serif;
            font-size: 1em;
        }
    </style>

</head>

<body style="position: relative; min-height: 100%; top: 0px;">
<img src="/images/loading2.gif" style="display: none">

<div id="waitingLB" style="display:none; cursor: default">
    <h3>We are processing your request. Please be patient.</h3>
</div>
<div class="wrapp_v2">
    <div id="logoBox"><a href="/main/index"><img style="height:100px" src="/images/logo.jpg"></a></div>
    <div class="loginMap">
        <div id="globalnav">
            <!-- <h1>Your global MT4 Forex broker</h1> -->
            <div id="countryboxcontain">
                <div class="countrybox">
                    <ul>
                        <li id="China"><img alt="China" src="images/flag/china.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='cn' href="/home/login?lang=cn">China</a>
                        </li>
                        <li id="Hong_Kong"><img alt="Hong Kong" src="images/flag/hong_kong.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='au' href="/home/login?lang=au">Hong Kong</a>
                        </li>
                        <li id="India"><img alt="India" src="images/flag/india.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='ph' href="/home/login?lang=ph">India</a>
                        </li>
                        <li id="Indonesia"><img alt="Indonesia" src="images/flag/indonesia.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='id' href="/home/login?lang=id">Indonesia</a>
                        </li>
                        <li id="Japan"><img alt="Japan" src="images/flag/japan.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='th' href="/home/login?lang=th">Japan</a>
                        </li>
                    </ul>
                </div>
                <div class="countrybox">
                    <ul>
                        <li id="Korea"><img alt="Korea" src="images/flag/korea.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='sg' href="/home/login?lang=sg">Korea</a>
                        </li>
                        <li id="Malaysia"><img alt="Malaysia" src="images/flag/malaysia.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='my' href="/home/login?lang=my">Malaysia</a>
                        </li>
                        <li id="United_Kingdom"><img alt="United Kingdom" src="images/flag/united_kingdom.png"
                                                     height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='nz' href="/home/login?lang=nz">United Kingdom</a>
                        </li>
                        <li id="Vietnam"><img alt="Vietnam" src="images/flag/vietnam.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='vn' href="/home/login?lang=vn">Vietnam</a>
                        </li>
                        <li id="New_Zealand"><img alt="New Zealand" src="images/flag/new_zealand.png" height="25" width="40">&nbsp;&nbsp;
                            <a target="_self" lang='nz' href="/home/login?lang=nz">New Zealand</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="clear"></div>

    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 50px; position: absolute; top: 317px; left: 720px;">
        <a href="/home/login?lang=cn" lang='cn' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-china" style="padding: 10px">China</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 85px; position: absolute; top: 341px; left: 740px;">
        <a href="/home/login?lang=au" lang='au' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-hongkong" style="padding: 10px">Hong Kong</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 50px; position: absolute; top: 349px; left: 666px;">
        <a href="/home/login?lang=ph" lang='ph' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-india" style="padding: 10px">India</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 70px; position: absolute; top: 415px; left: 743px;">
        <a href="/home/login?lang=id" lang='id' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-indonesia" style="padding: 10px">Indonesia</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 50px; position: absolute; top: 288px; left: 830px;">
        <a href="/home/login?lang=th" lang='th' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-japan" style="padding: 10px">Japan</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 50px; position: absolute; top: 296px; left: 776px;">
        <a href="/home/login?lang=sg" lang='sg' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-korea" style="padding: 10px">Korea</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 65px; position: absolute; top: 384px; left: 740px;">
        <a href="/home/login?lang=my" lang='my' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-malaysia" style="padding: 10px">Malaysia</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 115px; position: absolute; top: 240px; left: 454px;">
        <a href="/home/login?lang=nz" lang='nz' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-united_kingdom" style="padding: 10px">United Kingdom</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 65px; position: absolute; top: 362px; left: 729px;">
        <a href="/home/login?lang=vn" lang='vn' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-vietnam" style="padding: 10px">Vietnam</span>
        </a>
    </div>
    <div class="login ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" style="width: 95px; position: absolute; top: 511px; left: 907px;">
        <a href="/home/login?lang=nz" lang='nz' class="ui-dialog-titlebar-close ui-corner-all" role="button">
            <span class="ui-dialog-title" id="ui-dialog-title-new_zealand" style="padding: 10px">New Zealand</span>
        </a>
    </div>
</div>

</body>
</html>



<div id="dgLogin" title="<?php echo __('e-Trader Login') ?>" style="display:none;">
    <input type="hidden" name="doAction" id="doAction" value="">
    <div class="ui-widget" style="display: none" id="divError">
        <div style="margin-top: 20px; padding: 0 .7em;"
             class="ui-state-error ui-corner-all">
            <p style="margin: 5px"><span style="float: left; margin-right: .3em;"
                     class="ui-icon ui-icon-alert"></span>
                <strong id="errorMsg"></strong></p>
        </div>
    </div>
    <table cellpadding="5" cellspacing="5" class="loginFormWrap">
        <tr>
            <td style="width:100px; font-size: 12px"><strong><?php echo __('User Name') ?></strong></td>
            <td><input type="text" name="username" id="username" class="large" value=""></td>
        </tr>
        <tr>
            <td style="width:100px; font-size: 12px"><strong><?php echo __('Password') ?></strong></td>
            <td><input type="password" name="userpassword" id="userpassword" class="large" value=""></td>
        </tr>
    </table>
</div>
